<template>
  <div>
    <!-- 
      语法：:class="{类名:布尔值}"
      动态class只负责绑定class，样式覆盖规则不变
     -->
    <h1 :class="{ redSet: bool }" class="greenSet">动态class的使用</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bool: true,
    };
  },
};
</script>

<style>
.redSet {
  color: red;
}
.greenSet {
  font-size: 20px;
  /* 会覆盖上面的颜色 */
  color: aqua;
}
</style>